<template>
    <div>

        <!-- 顶部搜索区域 -->
        <topnav cityStatus="true"></topnav>  

        <!-- TAB切换区域 -->
        <tab :tabArr="tabArr" ref="child" @click="parTabFun"></tab>

        <!-- TAB切换内容区域 -->
        <div class="listContent" :style="'height:' + (sysH - 0)  + 'px;'">
            <ul 
                :style="'width:' + tabArr.length * sysW + 'px;transform: translate3d(' +  contentX + 'px, 0, 0);'"
            >
                <li :style="'width:' + sysW + 'px;'">
                    <div class="filmList">
                        <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2522880251.webp" alt="电影封面">
                        <div class="f_rightBox">
                            <p>厕所英雄</p>
                            <div>
                                <div class="starBox">
                                    <star grade='3'></star>
                                </div>
                                <span>7.2</span>
                            </div>
                        </div>
                    </div>

                    <div class="filmList">
                        <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2522880251.webp" alt="电影封面">
                        <div class="f_rightBox">
                            <p>厕所英雄</p>
                            <div>
                                <div class="starBox">
                                    <star grade='3'></star>
                                </div>
                                <span>7.2</span>
                            </div>
                        </div>
                    </div>

                    <div class="filmList">
                        <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2522880251.webp" alt="电影封面">
                        <div class="f_rightBox">
                            <p>厕所英雄</p>
                            <div>
                                <div class="starBox">
                                    <star grade='3'></star>
                                </div>
                                <span>7.2</span>
                            </div>
                        </div>
                    </div>
                    
                </li>
                <li :style="'width:' + sysW + 'px;'">1</li>
            </ul> 
        </div>         
    </div>
</template>

<script>
import topnav from '../../components/publicModule/header'
import tab from '../../components/publicModule/tab'
import star from '../../components/publicModule/star'

export default {
    data () {
        return {
            tabArr: ['正在热映','即将上映'],
            contentX: 0,//内容区域的X轴位置
            sysW: document.documentElement.clientWidth,//可视区域的宽度
            sysH: document.documentElement.clientHeight - 150,//可视区域的高度
        }
    },
    created () {
        let url = this.API2 + 'in_theaters?start=1&count=10'
    
        this.$axios.get(url).then(res => {
            //console.log(res.data);
        }).catch(error => {
            console.log(error)
        })
    },
    methods: {

        //子组件TAB切换
        parTabFun () {
            this.$refs.child.tabFun()
        },

        //内容切换
        tabFun (index) {
            this.eq = index
            if (index == 0) { 
                this.tabX  = 0
                this.contentX = 0
            } else {     
                this.tabX = this.sysW / 2
                this.contentX = -this.sysW
            }
        }

    },
    components: {
        topnav,
        tab,
        star
    }
}
</script>

<style scoped  lang="scss">
@import url('../../assets/css/base.scss');
.filmList {
    height: 168px;
    padding: 18px;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #e4e4e4;
    img {
        width: 120px;
    }
    .f_rightBox {
        width: calc(100% - 136px);
        height: 100%;
        padding-left: 16px;
        p {
            height: 32px;
            font-size: 23px;
            font-weight: 600;
            text-align: left;
        }
        .starBox {
            width: 70px;
        }
    }
}
</style>
